<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<body>
		<ol>
			<li>
				<b>静态布局（Static Layout）</b><br>
				即传统Web设计，对于PC设计一个Layout，<span style="color:red;">在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；</span>
				意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；对于移动设备，单独设计一个布局，
				使用不同的域名如wap.或m.。
				<p></p>
			</li>
			<hr>
			<li>
				<b>弹性布局 (Flex)</b><br>
				弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。
				弹性布局,又称“Flex布局”,是由W3C在2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。
				而且已经得到所有主流浏览器的支持
				<p></p>
			</li>
			<hr>
			<li>
				<b>自适应布局（Adaptive Layout）</b><br>
				自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，
				页面元素不随窗口大小的调整发生变化。你可以把自适应布局看作是静态布局的一个系列.
				就是说<span style="color:red;">你看到的页面，里面元素的位置会变化而大小不会变化；</span>
				<p></p>
			</li>
			<hr>
			<li>
				<b>流式布局（Liquid Layout）</b><br>
				流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，
				那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。
				<span style="color:red;">你看到的页面，元素的大小会变化而位置不会变化</span>——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
				<p></p>
			</li>
			<hr>
			<li>
				<b>响应式布局（Responsive Layout）</b><br>
				分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
				<span style="color:red;">可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
					每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。</span>
					<p></p>
			</li>
		</ol>

		<p>
			<h2>响应式布局步骤</h2>
			<ul>
				<li>
					<b>1.布局及设置meta标签</b><br>
					当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，
					页面固定宽度大小，我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询（Media Query)和响应式代码。
					这种操作更容易实现响应式特性。user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。
					当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。
					这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。<br>
					<per>
						&lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"&gt;<br>
						&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;<br>
						&lt;meta name="HandheldFriendly" content="true"&gt;<br>
					</per>
					<p></p>
				</li>
				<li>
					<b>2.通过媒体查询来设置样式media query</b><br>
					<per>
						@media screen and (max-width:980px){
						#head { … }
						#content { … }
						#footer { … }
						}
					</per><br>
					<span>这里面的样式会覆盖掉之前所定义的样式。</span><br>
					<p></p>
				</li>
				<li>
					<b>3.设置多种视图宽度</b><br>
					假如我们要兼容ipad和iphone视图，我们可以这样设置: <br>
					<per>
						/**ipad**/
						@media only screen and (min-width:768px)and(max-width:1024px){} <br>
						/**iphone**/
						@media only screen and (width:320px)and (width:768px){}
					</per>
					<p></p>
				</li>
				<li>
					<b>4.字体设置</b>
					到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。
					一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。 css3引入了新的单位叫做rem,和em类似但对于Html元素，
					rem更方便使用。rem是相对于根元素的，不要忘记重置根元素字体大小：
					<p></p>
				</li>
				<li>
					<b>5.响应式设计需要注意的问题</b><br>
					1,宽度不固定，可以使用百分比<br>
					2,图片处理:html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度
					<p></p>
				</li>
			</ul>
		</p>

	</body>
</html>
